<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>用户管理</title>
</head>
<body>
<div id="app">
<h1 style="text-align: center;">用户管理</h1>
<el-table
ref="multipleTable"
:data="student_group"
tooltip-effect="dark"
style="width: 100%"
stripe
border
@selection-change="handleSelectionChange">
<el-table-column
	type="selection"
	width="55">
</el-table-column>
<el-table-column
prop="id"
label="编号"
width="100">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="100">
</el-table-column>
<el-table-column
prop="sex"
label="性别"
width="100">
</el-table-column>
<el-table-column lable='操作'>
	<template slot='header' slot-scope='slot'>
		操作&nbsp;&nbsp;
		<el-button size='mini' type='danger' @click='addUser'>新增</el-button>
		<el-button size='mini' type='primary' @click='daleteChoosed'>删除所选</el-button>
	</template>
	<template slot-scope='scope'>
		<el-button
		size='mini'
		type='success'
		@click='handleEdit(scope.$index,scope.row)'>编辑</el-button>
		<el-button
		size='mini'
		type='danger'
		@click='handleDelete(scope.$index,scope.row)'>删除</el-button>
	</template>
</el-table-column>
</el-table>
</div>
<script>
function Student(id,name,sex){
this.id=id;
this.name=name;
this.sex=sex;
}

new Vue({
el:'#app',
data:{
	input:'',
	radio_id:'',
	radio_name:'',
	radio_sex:'',
	sex_group:['男','女'],
	student_group:[{
		id:'111',
		name:'老二',
		sex:'男',
	},{
		id:'222',
		name:'小四',
		sex:'女',
	},{
		id:'333',
		name:'小七',
		sex:'男',
	},{
		id:'444',
		name:'小八',
		sex:'男',
	}
	],
	selections:[]
},
methods:{
	addUser:function(){
		let student=new Student(
			this.input,
			this.radio_id,
			this.radio_name,
			this.radio_sex,
			this.sex_group
		);
		this.student_group.push(student);
	},
	daleteChoosed:function(scope){
		let i=scope.$index;
		this.student_group.splice(i,1);
	},
	handleSelectionChange:function(val){
		this.selections=val;
		console.log(val);
	}
}
})
</script>
</body>
</html>
